<!DOCTYPE html>
<html>
<head>
    <title>Sorting Strings</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        input[type="number"] {
            width: 50px;
        }
        button {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            text-align: left;
            padding: 8px;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Sorting Strings</h1>
    <label for="num">Enter the number of strings:</label>
    <input type="number" id="num" min="1">
    <button onclick="getInput()">Submit</button>
    <table id="stringTable" style="display: none;">
        <tr>
            <th>String</th>
        </tr>
    </table>
    <button id="sortButton" style="display: none;" onclick="sortStrings()">Sort</button>
    <p id="result" style="display: none;"></p>

    <script>
        function getInput() {
            var num = parseInt(document.getElementById("num").value);
            var table = document.getElementById("stringTable");
            table.style.display = "block";
            var sortButton = document.getElementById("sortButton");
            sortButton.style.display = "block";

            while (table.rows.length > num + 1) {
                table.deleteRow(table.rows.length - 1); 
            }

            for (var i = table.rows.length; i <= num; i++) {
                var row = table.insertRow(i);
                var cell = row.insertCell(0);
                var input = document.createElement("input");
                input.type = "text";
                cell.appendChild(input);
            }
        }

        function sortStrings() {
            var table = document.getElementById("stringTable");
            var rows = table.getElementsByTagName("tr");
            var strings = [];

            for (var i = 1; i < rows.length; i++) {
                var input = rows[i].getElementsByTagName("input")[0];
                strings.push(input.value);
            }

            strings.sort(function(a, b) {
                return a + b < b + a ? -1 : 1;
            });

            var result = strings.join("");
            var resultElement = document.getElementById("result");
            resultElement.innerHTML = result;
            resultElement.style.display = "block";
        }
    </script>
</body>
</html>